<template>
    <base-breadcrumb :title="titleName">
        <a-spin :spinning="loading">
            <div class="box">
                <a-card>
                    <title-name title="项目信息"></title-name>
                    <div class="main_content">
                        <a-descriptions :column="{ xs: 3, sm: 3, md: 3 }">
<!--                            <a-descriptions-item label="分公司名称">{{ project.branchCompany }}</a-descriptions-item>-->
<!--                            <a-descriptions-item label="项目名称">{{ project.projectName }}</a-descriptions-item>-->
                            <a-descriptions-item label="所属单位">
                                {{ project.branchComName+'/'+project.projectName || '无' }}</a-descriptions-item>

                        </a-descriptions>
                    </div>
                </a-card>
            </div>
            <div class="box">
                <a-card>
                    <title-name title="执行案件信息"></title-name>
                    <div class="main_content">
                        <a-descriptions :column="{ xs: 3, sm: 3, md: 3 }">
                            <a-descriptions-item label="函件编号">{{ caseInformation.letterNum }}</a-descriptions-item>
                            <a-descriptions-item label="函件名称">{{ caseInformation.letterName }}</a-descriptions-item>
                            <a-descriptions-item label="发函单位">{{ caseInformation.sender }}</a-descriptions-item>
                        </a-descriptions>
                        <a-descriptions :column="{ xs: 3, sm: 3, md: 3 }">
                            <a-descriptions-item label="申请执行人">{{ caseInformation.applicationForExecutor }}
                            </a-descriptions-item>
                            <a-descriptions-item label="被执行人">{{ caseInformation.executedPerson }}</a-descriptions-item>
                            <a-descriptions-item label="收到时间">{{ caseInformation.rogerThatTime }}</a-descriptions-item>
                        </a-descriptions>
                        <a-descriptions :column="{ xs: 3, sm: 3, md: 3 }">
                            <a-descriptions-item label="处理状态">{{ caseInformation.processingStatus }}
                            </a-descriptions-item>
                        </a-descriptions>
                        <a-descriptions :column="{ xs: 3, sm: 3, md: 3 }">
                            <a-descriptions-item label="备注">{{ caseInformation.remark }}</a-descriptions-item>
                        </a-descriptions>
                        <a-descriptions :column="{ xs: 3, sm: 3, md: 3 }">
                            <a-descriptions-item label="主要内容">{{ caseInformation.content }}</a-descriptions-item>
                        </a-descriptions>
                    </div>
                </a-card>
            </div>
            <div class="box">
                <a-card>
                    <title-name title="批注提示"></title-name>
                    <a-table :columns="colums" :data-source="loadData" rowkey="id" :pagination="pagination">
                        <div slot="attach" slot-scope="text, record">
                            <file-link :fileList="record.annex"></file-link>
                        </div>
                        <div slot="action" slot-scope="text, record">
                            <template>
                                <div v-for="(item, index) in record.reminder" :key="index">
                                    <span>{{ item.name }}</span>
                                    <span style="margin-left: 10px">{{ item.position }}</span>
                                    <p v-for="(sub, i) in item.feedbackList" :key="'feed_' + i">
                                        {{ sub.time }}进行了一条反馈
                                        <span v-if="sub.isFeedback" style="color: red">超期反馈</span>
                                        <a style="margin-left: 10px" @click="getDetails(sub)">查看</a>
                                    </p>
                                </div>
                            </template>
                        </div>
                    </a-table>
                </a-card>
            </div>
            <div class="box">
                <a-card>
                    <title-name title="销项"></title-name>
                    <div class="main_content">
                        <a-descriptions :column="{ xs: 1, sm: 1, md: 1 }">
                            <a-descriptions-item label="销项说明">{{ output.salesDescription || '无' }}</a-descriptions-item>
                        </a-descriptions>
                        <a-descriptions :column="{ xs: 1, sm: 1, md: 1 }">
                            <a-descriptions-item label="销项证明文件">
                                <file-link :fileList="output.fileArrays"></file-link>
                            </a-descriptions-item>
                        </a-descriptions>
                    </div>
                </a-card>
            </div>
            <div class="box" v-if="$route.query.id">
                <a-card>
                    <title-name title="附件列表"></title-name>
                    <u-table :uploadList="addFile" :deleteUrl="fileDel" :is-show="false"
                             :listUrl="fileList" :businessId="$route.query.id" businessCode="LCM12"></u-table>
                </a-card>
            </div>
        </a-spin>
        <div class="operation page-btn-right-top" style="text-align: right; margin-right: 20px">
            <a-button @click="$close()"  v-checkVisibleInDetail >关闭</a-button>
        </div>
        <div class="coverlayer">
            <feed-back
                :visible="visible"
                :feedbackData="feedbackData"
                @ok="() => (visible = false)"
                @cancel="() => (visible = false)"
            >
            </feed-back>
        </div>
    </base-breadcrumb>
</template>

<script>
import {
    getCaseManagementDetails, caseManagementAddFile,
    caseManagementDeleteFile,
    caseManagementFindFileList
} from '@/api/legal'
import feedBack from '../feedback'
import { addFile, fileDel, fileList } from '@/api/material/materialMasterPlan/materialPlan'

export default {
  name:'a'+Date.now(),
  components: {
        feedBack
    },
    data() {
        return {
            addFile: caseManagementAddFile(),
            fileDel: caseManagementDeleteFile(),
            fileList: caseManagementFindFileList(),
            titleName: undefined,
            loading: false,
            queryParam: {},
            loadData: [],
            project: {},
            output: {},
            caseInformation: {},
            feedbackData: {},
            colums: [
                {
                    title: '批注提示',
                    dataIndex: 'commentPrompt',
                    width: 150
                },
                {
                    title: '录入时间',
                    dataIndex: 'entryTime',
                    width: 150
                },
                {
                    title: '附件',
                    scopedSlots: { customRender: 'attach' },
                    width: 150
                },
                {
                    title: '反馈期限',
                    dataIndex: 'feedbackPeriod',
                    width: 150
                },
                {
                    title: '提示人员',
                    scopedSlots: { customRender: 'action' }
                }
            ],
            visible: false,
            pagination: false
        }
    },
    mounted() {
        let that = this
        this.loading = true
        getCaseManagementDetails({ id: this.$route.query.id }).then((res) => {
            if (res.code === 200) {
                that.caseInformation = res.data.caseInformation
                that.loadData = res.data.commentPrompt
                that.project = res.data.project
                that.output = res.data.output || {}
            } else {
                that.$Message.error('查询失败')
            }
            this.loading = false
        })
    },
    methods: {
        getDetails(record) {
            this.feedbackData.name = record.name
            this.feedbackData.position = record.position
            this.feedbackData.time = record.time
            this.feedbackData.content = record.feedbackContent
            this.visible = true
        }
    }
}
</script>

<style scoped>
.box {
    margin: 12px 0;
}

.coverlayer {
    width: 100%;
    height: 100%;
    background: #000000;
    opacity: 0.4;
    filter: alpha(opacity=40);
}

.main_content {
    padding: 0 20px;
    box-sizing: border-box;
}
</style>
